<template>
<!--  字体选择-->
  <!--      <el-divider></el-divider>
      &lt;!&ndash;字体选择&ndash;&gt;
      <span :value="titleList.value">{{ titleList.titel_sizi }}：</span>
      <el-select v-model="fontValue" class="opt"
                 filterable
                 allow-create
                 default-first-option>
        <el-option
            v-for="(item,index) in fontList"
            :value="item.value"
            :key="index"
        >{{ item.name }}
        </el-option>
      </el-select>
      <br><br>-->

  <!--表格-->
  <el-button
      style="width: 8rem;text-align:center"
      @click="handleEdit2('', '', '')">
    <span>修改选中样式</span>
  </el-button>
  <el-table
      v-for="(item1,index1) in tableList"
      :data="item1"
      :key="index1"
      @selection-change="handleSelectionChange"
      style="width: 100%">

    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        v-for="(item,index) in table_titelList"
        :key="index"
        :prop="item.field"
        :label="item.title"
    >
      <template slot-scope="scope">
        <el-input v-if="tableShow==='input'
                      &&item.field!=='Style'
                      &&item.field!=='HeadStyle'
                      &&item.field!=='RowStyle'"
                  v-model="scope.row[scope.column.property]" @blur="blurshow"></el-input>
        <span v-else-if="tableShow==='span'"
              style="margin-left: 10px"
              @click="blurshow">{{ scope.row[scope.column.property] }}</span>
        <el-button v-else-if="tableShow==='input'
                       &&item.field.match(/Style/i)"
                   v-model="scope.row[scope.column.property]"
                   @click="handleEdit2(scope.$index, scope.row,item.field)"
        >修改{{ item.title }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
        </el-button>
        <el-button
            @click.native.prevent="deleteRow(scope.$index, item1)"
            type="danger"
            size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
    <!--        <el-table-column
                :prop="a.Name"
                label="名称"
                width="180">
              <template slot-scope="scope">
                <el-input v-if="tableShow" v-model="scope.row.Name" @blur="blurshow"></el-input>
                <span v-else style="margin-left: 10px" @click="blurshow2">{{ scope.row.Name }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="value"
                label="值"
                width="180">
              <template slot-scope="scope">
                <el-input v-if="tableShow" v-model="scope.row.value" @blur="blurshow"></el-input>
                <span v-else style="margin-left: 10px" @click="blurshow2">{{ scope.row.value }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="Width"
                label="宽度"
                width="180">
              <template slot-scope="scope">
                <el-input v-if="tableShow" v-model="scope.row.Width" @blur="blurshow"></el-input>
                <span v-else style="margin-left: 10px" @click="blurshow2">{{ scope.row.Width }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="FontSize"
                label="字体大小"
                width="180">
              <template slot-scope="scope">
                <el-input v-if="tableShow" v-model="scope.row.FontSize" @blur="blurshow"></el-input>
                <span v-else style="margin-left: 10px" @click="blurshow2">{{ scope.row.FontSize }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="Style"
                label="样式"
                width="180">
              <template slot-scope="scope">
                <el-input v-if="tableShow" v-model="scope.row.Style" @blur="blurshow"></el-input>
                <span v-else style="margin-left: 10px" @click="blurshow2">{{ scope.row.Style }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="HeadStyle"
                label="头部样式"
                width="180">
              <template slot-scope="scope">
                <el-input v-if="tableShow" v-model="scope.row.HeadStyle" @blur="blurshow"></el-input>
                <span v-else style="margin-left: 10px" @click="blurshow2">{{ scope.row.HeadStyle}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="RowStyle"
                label="行样式"
                width="180">
              <template slot-scope="scope">
                <el-input v-if="tableShow" v-model="scope.row.RowStyle" @blur="blurshow"></el-input>
                <span v-else style="margin-left: 10px" @click="blurshow2">{{ scope.row.RowStyle }}</span>
              </template>
            </el-table-column>-->
  </el-table>

<!--表格2-->
  <!--          <vxe-table
                        v-show="item.stype==='table'"
                        border="inner"
                        highlight-hover-row
                        highlight-current-row
                        ref="xTable"
                        max-width="50%"
                        :data="dataList[idx].columns"
                        :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
                    >
                      &lt;!&ndash;表头静态设置&ndash;&gt;
                      <vxe-table-column field="Name"
                                        title="名字"
                                        width="120"
                                        :edit-render="{name: 'input', autoselect: true}">
                      </vxe-table-column>
                      <vxe-table-column field="value" title="值"
                                        width="180"
                                        :edit-render="{name: 'input', autoselect: true}">
                      </vxe-table-column>
                      <vxe-table-column field="Width" title="宽度"
                                        width="120"
                                        :edit-render="{name: 'input', autoselect: true}">
                      </vxe-table-column>
                      <vxe-table-column field="FontSize" title="字体大小"
                                        width="120"
                                        :edit-render="{name: 'input', autoselect: true}">
                      </vxe-table-column>
                      <vxe-table-column field="Style" title="样式"
                                        width="180"
                      >
                      </vxe-table-column>
                      <vxe-table-column field="HeadStyle" title="头部样式"
                                        width="180"
                                        :edit-render="{name: '$select', options: textList}">
                      </vxe-table-column>
                      <vxe-table-column field="RowStyle"
                                        width="180"
                                        title="行样式"
                                        :edit-render="{name: '$select', options: textList}"
                      >
                      </vxe-table-column>
                      <vxe-table-column field="DataFormat" title="时间格式"
                                        width="120"
                                        :edit-render="{name: 'input', autoselect: true}"
                      >
                      </vxe-table-column>
                      <el-table-column label="操作尝试2">
                        <template slot-scope="scope">
                          <el-button type="text" @click="csss(scope.row)">查看详情</el-button>
                        </template>
                      </el-table-column>
                      &lt;!&ndash;表头动态生成&ndash;&gt;
                      &lt;!&ndash;<vxe-table-column
                           v-for="(config, index) in table_titelList"
                           :key="index"
                           v-bind="config"
                       >
                       </vxe-table-column>&ndash;&gt;
                    </vxe-table>-->
</template>

<script>
export default {
  name: "table"
}
</script>

<style scoped>

</style>
